<template>
	<div class="m-content-box">
		<div class="basedata-box">
			<p class="title">系统默认渠道来源</p>
			<ul id="basedataList" class="basedata-list">
				<li v-for="(item,index) in lists" :key="index">
					<span class="title">{{item.name}}</span>
				</li>
			</ul>
		</div>
		<div class="basedata-tips">以上系统默认项，不能编辑删除。以下自定义项，支持编辑删除。</div>
		<div class="basedata-box">
			<div class="top-handle">
				<p class="title">自定义渠道来源</p>
				<div class="btn-group">
					<el-button v-if="!updateShow && !addShow" type="primary" @click="updateShow=true">编辑</el-button>
					<el-button v-if="!addShow && !updateShow" type="primary" @click="addShow=true">新增</el-button>
					<el-button v-if="updateShow || addShow" type="primary" @click="save()">保存</el-button>
					<el-button v-if="updateShow || addShow" type="primary" @click="cant()">取消</el-button>
				</div>
			</div>
			<ul v-if="!updateShow" id="customBasedataList" class="basedata-list">
				<li v-for="(item,index) in list" :key="index">
					<span class="title">{{item.name}}</span>
				</li>
				<li v-for="(item,index) in list1" :key="index+'a'">
					<el-input class="inp-140x34" style="width: 140px;" v-model="item.name"/>
					<span class="del-custom-basedata" @click.stop="del1(index)">删除</span>
				</li>
			</ul>
			<ul v-if="updateShow" id="customBasedataList" class="basedata-list">
				<li v-for="(item,index) in list" :key="index">
					<el-input class="inp-140x34" style="width: 140px;" v-model="item.name"/>
					<span class="del-custom-basedata" @click.stop="del(index)">删除</span>
				</li>
			</ul>
		</div>
		<div v-if="addShow" class="add-source" @click.stop="add"><i class="el-icon-circle-plus-outline"></i>新增</div>
	</div>
</template>

<script>
	// import fetchList from '@/api/article'
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex'
	import {
		getLists,
		addEdit,
		getDel,
		getSyslists
	} from '@/api/system'
	export default {
		name: 'ArticleList',
		components: {},
		data() {
			return {
				updateShow: false,
				addShow: false,
				list: [],
				list1: [],
				lists: []
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var xuanList = [{
				name: '基础数据',
				url: '/system/memberBaseData',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.getSyslists()
			this.getList()
		},
		methods: {
			getSyslists(){
				getSyslists().then(response => {
					const {
						data
					} = response
					console.log(data)
					this.lists = data
				});
			},
			getList(){
				getLists().then(response => {
					const {
						data
					} = response
					console.log(data)
					this.list = data
					this.addShow = false
					this.updateShow = false
					this.list1 = []
				});
			},
			add() {
				this.list1 = this.list1.concat({
					name: ''
				})
			},
			del(index){
				getDel({
					'id': this.list[index].id
				}).then(response => {
					const {
						data
					} = response
					console.log(data)
					this.list.splice(index, 1);
				});
			},
			del1(index){
				this.list1.splice(index, 1);
			},
			save() {
				var type = this.addShow?1:2
				addEdit({
					'type': type,
					'canceljson': JSON.stringify(this.addShow?this.list1:this.list)
				}).then(response => {
					const {
						data
					} = response
					this.getList()
				});
			},
			cant() {
				this.addShow = false
				this.updateShow = false
				this.list1 = []
			}
		}
	}
</script>

<style scoped>
	.m-content-box {
		position: relative;
		padding: 30px 63px;
	}

	.basedata-tips {
		padding-top: 5px;
		height: 50px;
		color: #f49352;
		font-size: 12px;
	}

	.add-source {
		display: inline-block;
		padding-left: 10px;
		height: 40px;
		line-height: 40px;
		color: #41c3a8;
		cursor: pointer;
	}

	.basedata-box>.title,
	.basedata-box .top-handle>.title {
		position: relative;
		height: 22px;
		color: #787878;
		font-size: 12px;
	}

	ul,
	dl,
	ol {
		list-style: none;
	}

	.basedata-list li:nth-child(odd) {
		background: #f2f2f2;
	}

	.basedata-list li {
		height: 40px;
		line-height: 40px;
		padding-left: 10px;
	}

	p,
	ul,
	dl,
	dd,
	li,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	input {
		margin: 0;
		padding: 0;
		font-weight: 400;
	}

	.hide,
	.js-data,
	.todo-next {
		display: none !important;
	}

	.basedata-box .top-handle {
		position: relative;
		height: 22px;
	}

	.basedata-box>.title,
	.basedata-box .top-handle>.title {
		position: relative;
		height: 22px;
		color: #787878;
		font-size: 12px;
	}

	.basedata-box .top-handle .btn-group {
		position: absolute;
		right: 0;
		top: -20px;
	}

	.del-custom-basedata {
		color: #ff1f1f;
		margin-left: 15px;
		cursor: pointer;
	}
</style>